<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <!-- html和text区别 -->
    <div v-html="content">标签提示</div>
    <div v-text="content"></div>
    <br/>

    <!-- 插值表达式 -->
    <div>{{title}}</div>
    <br/>

    <!-- 双向绑定 -->
    <input v-model="bothway"/>
    <div>{{bothway}}</div>
    <br/>

    <!-- 事件绑定 -->
    <div v-on:click="handle">{{onchange}}</div>
    <div @click="handle">{{onchange}}</div>
    <br/>

    <!-- 提示标签 -->
    <div v-bind:title="title">提示标签</div>
    <div :title="title">提示标签</div>
    <br/>
</div>
<br/> <br/>

<div id="root2">
    <!-- 计算属性和侦听器 -->
    <input v-model="first"/>
    <input v-model="second"/>
    <div>{{first}}</div>
    <div>{{second}}</div>
    <div>{{sum}}</div>
    <div>{{count}}</div>
    <br/>
</div>
<br/> <br/>

<div id="root3">
    <!-- v-if 销毁创建dom树 -->
    <button @click="ifClick">if-toggle</button>
    <div v-if="show">hello world</div>

    <!-- v-show 显示隐藏节点 -->
    <button @click="showClick">show-toggle</button>
    <div v-show="show">hello world</div>

    <!-- v-for 循环遍历 -->
    <ul>
        <li v-for="item of list":key = "index">{{item}}</li>
    </ul>
</div>
<br/> <br/>


<script>
    new Vue({
        el: "#root",
        data: {
            title: "this is a title",
            content: "<h3>html与text区别</h3>",
            bothway: "双向绑定",
            onchange: "点击事件"
        },
        methods: {
            handle: function () {
                this.content = "内容改变"
            }
        }
    })

    new Vue({
        el: "#root2",
        data: {
            first: '',
            second: '',
            count: 0
        },
        computed: {
            sum: function () {
                return this.first + this.second;
            }
        },
        watch: {
            sum: function () {
                this.count++;
            }
        }
    })

    new Vue({
        el: "#root3",
        data: {
            show: true,
            list: [1, 2, 3]
        },
        methods: {
            ifClick: function () {
                this.show = !this.show;
            },
            showClick: function () {
                this.show = !this.show;
            }
        }
    })
</script>
</body>
</html>